<template>
    <section>




        <!--新增界面-->
        <el-col :sm="24" :lg="16">
            <div class="grid-content bg-purple">
                <div class="dev-title">添加设备数据模板</div>
            </div>
            <div class="col-bg clearfix">
                <el-form :model="addForm" label-width="120px" :rules="addFormRules" ref="addForm" style="padding: 15px;width: 80%;margin:40px auto 10px;max-width: 900px;">
                    <el-form-item label="名称" prop="name" class="grade">
                        <el-input v-model="addForm.name"></el-input>
                    </el-form-item>
                    <el-form-item label="排序值"     class="grade">
                        <el-input v-model="addForm.priority"></el-input>
                    </el-form-item>
                </el-form>
                <el-form :model="recipeBodyFormList" label-width="120px" :rules="addFormRules" ref="recipeBodyFormList"
                    style="padding: 15px;width: 80%;margin:0 auto 10px;max-width: 900px;">

                    <el-form-item label="内容名称" class="grade" prop="register">
                        <el-input v-model="recipeBodyFormList.name"></el-input>
                    </el-form-item>
                    <el-form-item label="数据类型" class="grade" prop="register">
                        <el-select v-model="recipeBodyFormList.dataType" @change="scade()" placeholder="请选择数据类型">
                            <el-option label="数值型" value="0"></el-option>
                            <el-option label="开关型" value="1"></el-option>
                            <el-option label="字符型" value="2"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="数据点地址" class="grade" prop="register">
                        <el-input v-model="recipeBodyFormList.register"></el-input>
                    </el-form-item>
                    <!-- <el-form-item label="数据点长度" class="grade" >
                        <el-input v-model="recipeBodyFormList.registerLength" :disabled="disabled"></el-input>
                    </el-form-item> -->
                    <el-form-item label="数值类型">
                        <el-select v-model="recipeBodyFormList.valueKind" placeholder="请选择数值类型" prop="register">
                            <el-option v-for="item in dictlist" :label="item.remark" :value="item.value"></el-option>

                        </el-select>
                    </el-form-item>
                    <el-form-item label="整数位数" class="grade" >
                        <el-select v-model="recipeBodyFormList.integerAccuracy" :disabled="disabled">
                            <el-option label="0" value="0"></el-option>
                            <el-option label="1" value="1"></el-option>
                            <el-option label="2" value="2"></el-option>
                            <el-option label="3" value="3"></el-option>
                            <el-option label="4" value="4"></el-option>
                            <el-option label="5" value="5"></el-option>
                            <el-option label="6" value="6"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="小数位数" class="grade" >
                        <!-- <el-input type="number" v-model="recipeBodyFormList.decimalAccuracy" :disabled="disabled"></el-input> -->
                        <el-select v-model="recipeBodyFormList.decimalAccuracy" :disabled="disabled">
                                <el-option label="0" value="0"></el-option>
                                <el-option label="1" value="1"></el-option>
                                <el-option label="2" value="2"></el-option>
                                <el-option label="3" value="3"></el-option>
                                <el-option label="4" value="4"></el-option>
                                <el-option label="5" value="5"></el-option>
                                <el-option label="6" value="6"></el-option>
                            </el-select>
                    </el-form-item>

                    <el-form-item label="读写" class="grade" prop="register">
                        <el-radio-group v-model="recipeBodyFormList.writeRead">
                            <el-radio label="0">只读</el-radio>
                            <el-radio label="1">读写</el-radio>
                        </el-radio-group>
                    </el-form-item>

                    <el-form-item label="单位" class="grade" >
                        <el-select v-model="recipeBodyFormList.unit" placeholder="请选择单位" :disabled="disabled">
                                <el-option  label="无" value=""></el-option>
                            <el-option v-for="item in unitlist" :label="item.remark" :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                    <!-- <el-form-item label="公式" class="grade" >
                        <el-input v-model="recipeBodyFormList.formula"></el-input>
                    </el-form-item> -->
                    <!-- <el-form-item label="刷新频率" prop="register"  class="grade">
                        <el-input type="number" v-model="recipeBodyFormList.refreshRate"></el-input>
                    </el-form-item> -->
                    <!-- <el-form-item label="死区起始值" class="grade" prop="register">
                        <el-input type="number" v-model="recipeBodyFormList.deadSpaceStart"></el-input>
                    </el-form-item>
                    <el-form-item label="死区结束值" class="grade" prop="register">
                        <el-input type="number" v-model="recipeBodyFormList.deadSpaceEnd"></el-input>
                    </el-form-item> -->
                    <!-- <el-form-item label="流量模式">
                        <el-radio-group v-model="recipeBodyFormList.fluxMode">
                            <el-radio label="0">默认</el-radio>
                            <el-radio label="1">省流量</el-radio>
                        </el-radio-group>
                    </el-form-item> -->
                    <el-form-item label="权限 " prop="register">
                        <el-radio-group v-model="recipeBodyFormList.restrict">
                            <el-radio label="0">公开</el-radio>
                            <el-radio label="1">保密</el-radio>
                            <el-radio label="2">不对子用户开放</el-radio>
                        </el-radio-group>
                    </el-form-item>

                    <!-- <el-form-item label="数据存储" prop="register">
                        <el-radio-group v-model="recipeBodyFormList.ifSaveHistory">
                            <el-radio label="0">不保持</el-radio>
                            <el-radio label="1">保持</el-radio>
                        </el-radio-group>
                    </el-form-item> -->
                    <el-form-item label="图标组" >
                        <el-select v-model="recipeBodyFormList.deviceRecipePictureGroupId" placeholder="请选择图标组">
                                <el-option label="默认" value="0"></el-option>
                            <el-option v-for="item in deviceRecipe" :label="item.name" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item prop="remark" label="描述" >
                        <el-input type="textarea" v-model="recipeBodyFormList.remark"></el-input>
                    </el-form-item>
                    <el-form-item label="排序值" prop="register"  class="grade">
                        <el-input type="number" v-model="recipeBodyFormList.priority"></el-input>
                    </el-form-item>

                </el-form>
                <div slot="footer" class="dialog-footer" style="text-align: center;">
                    <el-button @click.native="addFormVisible = false">取消</el-button>
                    <el-button type="primary" @click.native="addSubmit" :loading="addLoading">提交</el-button>
                </div>
            </div>
        </el-col>
        <!-- <el-col :sm="24" :lg="8" style="padding-left: 20px">
                <div class="grid-content bg-purple">
                    <div class="dev-title">帮助</div>
                </div>
                <div class="col-bg clearfix">
                    <el-collapse v-model="activeName" accordion>
                        <el-collapse-item title="数据模板" name="1">
                            <div>云服务将根据数据模板解析协议，相同格式的设备可关联同一个模板。请先添加数据模板，然后添加数据点，最后添加设备。</div>
                        </el-collapse-item>
                        <el-collapse-item title="数据点" name="2">
                                <div>与组态软件的数据点写法相同，填十进制数据点地址，数据点为起始地址+1。</div>
                                <div>如：</div>
                                <div>功能码03H或06H，起始地址0000H，则填：40001；</div>
                                <div>04H，起始地址000AH，则填：30011；</div>
                                <div>功能码01H或05H，起始地址0002H，则填：00003；</div>
                                <div>功能码02H，起始地址0003H，则填：10004。</div>
                        </el-collapse-item>
                        <el-collapse-item title="数据类型" name="3">
                            <div>AB CD：大端在前</div>
                            <div>CD AB：小端在前</div>
                            <div> 如：</div>
                            <div>4字节无符号整数(AB CD)：123456 为 0x0001 0xE240</div>
                            <div>4字节无符号整数(CD AB)：123456 为 0xE240 0x0001</div>
                            <div>4字节有符号整数(AB CD)：-123456为 0xFFFE 0x1DC0</div>
                            <div>4字节有符号整数(CD AB)：-123456为 0x1DC0 0xFFFE</div>
                            <div>4字节浮点型(AB CD)：12.3 为 0x3F9D 0x70A4</div>
                            <div>4字节浮点型(CD AB)：12.3 为 0x70A4 0x3F9D</div>
                        </el-collapse-item>
                     
                    </el-collapse>
                </div>
            </el-col> -->
    </section>
</template>

<script>
    import {
        device_data_recipe_post,
        alarm_trigger_template_post,
        alarm_group_query,
        dict_query,
        device_recipe_picture_query
    } from '../../api/api';

    export default {
        data() {

            return {
                disabled:false,
                activeName:'1',
                unitlist: '',
                dictlist: '',
                alarmUserList: {}, //告警组ID
                alarmUserLists: {}, //告警人ID
                alarmTypeValue: '',

                addLoading: false,
                addFormRules: {
                    name: [{
                        required: true,
                        message: '请输入姓名',
                        trigger: 'blur'
                    },{ min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }],
                    priority: [{
                        required: true,
                        message: '必填',
                        trigger: 'blur'
                    }],

                    dataType: [{
                        required: true,
                        message: '必填',
                        trigger: 'blur'
                    }],
                    register: [{
                        required: true,
                        message: '必填',
                        trigger: 'blur'
                    }],
                    registerLength: [{
                        required: true,
                        message: '必填',
                        trigger: 'blur'
                    }],
                    valueKind: [{
                        required: true,
                        message: '必填',
                        trigger: 'blur'
                    }],
                    integerAccuracy: [{
                        required: true,
                        message: '必填',
                        trigger: 'blur'
                    }],
                    decimalAccuracy: [{
                        required: true,
                        message: '必填',
                        trigger: 'blur'
                    }],
                    writeRead: [{
                        required: true,
                        message: '必填',
                        trigger: 'blur'
                    }],
                    unit: [{
                        required: true,
                        message: '必填',
                        trigger: 'blur'
                    }],
                    formula: [{
                        required: true,
                        message: '必填',
                        trigger: 'blur'
                    }],
                    refreshRate: [{
                        required: true,
                        message: '必填',
                        trigger: 'blur'
                    }],
                    deadSpaceStart: [{
                        required: true,
                        message: '必填',
                        trigger: 'blur'
                    }],
                    deadSpaceEnd: [{
                        required: true,
                        message: '必填',
                        trigger: 'blur'
                    }],
                    fluxMode: [{
                        required: true,
                        message: '必填',
                        trigger: 'blur'
                    }],
                    restrict: [{
                        required: true,
                        message: '必填',
                        trigger: 'blur'
                    }],
                    ifSaveHistory: [{
                        required: true,
                        message: '必填',
                        trigger: 'blur'
                    }],
                    remark: [{
                        required: true,
                        message: '必填',
                        trigger: 'blur'
                    }],
                    priority: [{
                        required: true,
                        message: '必填',
                        trigger: 'blur'
                    }],
                },
                //新增界面数据
                deviceRecipe:'',
                recipeBodyFormList: {
                    name: '',
                    dataType: '',
                    register: '',
                    registerLength: '',
                    valueKind: '',
                    integerAccuracy: '',
                    decimalAccuracy: '',
                    writeRead: '0',
                    unit: '',
                    formula: '',
                    refreshRate: '',
                    deadSpaceStart: '',
                    deadSpaceEnd: '',
                    fluxMode: '0',
                    restrict: '0',
                    ifSaveHistory: '1',
                    remark: '',
                    priority: '',
                    deviceRecipePictureGroupId:''
                },
                addForm: {
                    name: '',
                    priority: '',
                    recipeBodyFormList: [

                    ],

                }

            }
        },
        methods: {

            //新增
            scade(){
                if(this.recipeBodyFormList.dataType==1){
                    this.disabled=true;
                }else{
                          
                    this.recipeBodyFormList.decimalAccuracy=0;
                    this.recipeBodyFormList.refreshRate=0;
                    this.recipeBodyFormList.integerAccuracy=5;
                    this.recipeBodyFormList.valueKind=this.dictlist[0].value;
                    this.recipeBodyFormList.priority=1;
                    this.recipeBodyFormList.deviceRecipePictureGroupId=0;
                    this.disabled=false;
                }
            },
            addSubmit: function () {
                this.$refs.addForm.validate((valid) => {
                    if (valid) {
                        this.$confirm('确认提交吗？', '提示', {}).then(() => {

                            this.addLoading = true;
                            //NProgress.start();
                            this.addForm.recipeBodyFormList.push(this.recipeBodyFormList)
                            let para = Object.assign({}, this.addForm);

                            device_data_recipe_post(para).then((res) => { this.begCode (res.code);
                                    this.addLoading = false;
                                if (res.code == 0) {
                                    //NProgress.done();
                                    this.$message({
                                        message: '提交成功',
                                        type: 'success'
                                    });
                                    this.$refs['addForm'].resetFields();
                                    this.$router.push({
                                        path: "/template/data"
                                    });
                                    this.addFormVisible = false;

                                }

                            });
                        });
                    }
                });
            }


        },
        mounted() {
            let para1 = {
                name: 'valueKind',
                pageSize: 999,
                pageNo: 1,
            }
            dict_query(para1).then((res) => { this.begCode (res.code);
                if (res.code == 0) {
                    this.addLoading = false;

                    this.dictlist = res.data.list;


                }

            });
            para1 = {
                name: 'unit',
                pageSize: 999,
                pageNo: 1,
            }
            device_recipe_picture_query().then((res)=>{
                this.deviceRecipe=res.data.list;
            })
            dict_query(para1).then((res) => { this.begCode (res.code);
                if (res.code == 0) {
                    this.addLoading = false;

                    this.unitlist = res.data.list;


                }

            });

        }
    }
</script>

<style scoped>
    .el-form-item .el-form-item {
        margin-bottom: 22px;
    }
</style>